<script src="../index.ts"></script>
<div class="row file-upload">
  <div *ngIf="showDropZone" class="col-sm-8 drop-container">
    <div ng2FileDrop
         [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
         (fileOver)="fileOver($event)"
         [uploader]="uploader"
         class="well my-drop-zone">

      <span *ngIf="!uploader.isUploading && !uploadedFile">
        <span class="upload-file-name" *ngIf="file">{{file | pathToName}}</span>
        <span *ngIf="!file">拖动文件到此处上传</span>
      </span>

      <span class="upload-file-name" *ngIf="!uploader.isUploading && uploadedFile">
      {{uploadedFile.origName}} 上传成功
      </span>

      <span *ngIf="uploader.isUploading">
         上传中...
      </span>

    </div>
  </div>

  <div [ngClass]="{'col-sm-4': showDropZone}">
    <div class="upload-row">
      <div class="upload-input-wrapper">
            <span class="upload-input-container">
                <input id="upload-input" name="upload" type="file" ng2FileSelect [uploader]="uploader"
                       [accept]="mimeType.toString()"/>
            </span>
            <span class="upload-button-container">
                <button (click)='selectFile()' type="button" class="btn btn-secondary btn-sm">
                  <span *ngIf="showDropZone">选择</span>
                  <span *ngIf="!showDropZone">上传...</span>
                </button>
            </span>
      </div>
    </div>
  </div>

  <div *ngIf="uploader.isUploading" class="progress-wrapper">
    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
  </div>

</div>

<ng2-toasty></ng2-toasty>
